<template>
	<div class="dialogBox">
		<div class="bg" @click="closefeed"></div>
		<div :class="[{wap:system.isMobile},'feedBox clearfix']" @click="getclick($event)">
			<div class="feedCon">
		        <span class="closer" @click="closefeed"></span>
				<span class="top show">你的反馈将帮助 WIRE AI 优化进步<br/> 且获得相应积分</span>
				<div class="snagList">
				    <span 
				        :class="[{active:item.isCheck},'snagItem show']" 
				        v-for="item in list" :key="item.id"
				        @click="checkQues($event,item.id)"
				    >
				        {{ item.title }}
				    </span>
				</div>
				<textarea class="textCon" v-model="userfeedback" placeholder="请输入您的意见/建议（200字以内）"></textarea>
				<div class="upload">
				    <div class="file" v-if="files">{{ fileName }}</div>
				    <div class="btn" v-else>
				        <el-upload
				            :show-file-list="false"
				            class="upload-demo"
				            multiple
				            action="/api/apiindex/fileupload"
				            :data="{type:'file'}"
				            :headers="{ Token: useStore.token }"
				            :before-upload="checkFile"
				            :on-preview="handlePreview"
				            :on-remove="handleRemove"
				            :on-success="fileSuccess"
				            :before-remove="beforeRemove"
				            :on-progress = "handelProgress"
				            :limit="1"
				        >
				            <span>上传文件</span>
				        </el-upload>
                        
				    </div>
                    
				    <el-progress v-if="progress!=0 && !files" stroke-width="3" class="circle"  width="35" height="35" type="circle" >
				        <template #default="{ percentage }">
				            <span class="percentage">{{ progress }}%</span>
				        </template>
				    </el-progress>
				    <!-- <span :class="[{active:isType},'btnUp']" v-if="!files" @click.stop="openType"></span> -->
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="预览文件"
                        placement="top"
                        v-if="files"
                    >
                        <a class="prew" :href="`${baseurl}${files}`" target="_blank" v-if="files"></a>
                    </el-tooltip>
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="删除"
                        placement="top"
                        v-if="files"
                    >
                        <span class="close" v-if="files" @click.stop="removeFile"></span>
                    </el-tooltip>
				   
				
				    <ul class="typeList" v-if="isType">
				        <li 
				            :class="[{active:type==item.id}]" 
				            v-for="item in typelist" :key="item.id"
				            @click="checkType(item.id)"
				        >
				            {{ item.title }}
				        </li>
				    </ul>
				</div>
				<span class="tit-1 show">
				    支持上传1个文件，格式为txt、docx、word、rft、pdf、wps、xlsx、doc、ppt、pptx，50MB以内。
				</span>
				<span class="tit-1 show">
				    更多问题/建议可以通过邮箱反馈：<br/>
				    wireai-service@dabai.com
				</span>
				<span class="btnSubmit flexC" @click="save"><i>提交</i></span>
			</div>
		    
		</div>
	</div>
   
</template>

<script setup lang='ts'>
    import { useSystemStore } from "@/store/modules/system";
	import { useUserStore } from "@/store/modules/user";
    const system = useSystemStore();
    const useStore = useUserStore();
    const $_ = inject('$_', null as any);
    const api = inject('$base', null as any);
    const baseurl = inject('$baseurl', null as any);
    const typelist = ref<any>([
        { 'id' : 1, 'title':'上传文件', 'content' : '支持上传1个文件，格式为txt、docx、word、rft、pdf、wps、xlsx、doc、ppt、pptx，50MB以内。' },
        { 'id' : 2, 'title':'上传图片', 'content' : '支持上传1个图片，格式为png、jpg、jpeg，50MB以内。' }
    ])
    const type = ref<number>(1);
    const isType = ref<boolean>(false);
    const isCheckId = ref<number>();
    const userfeedback = ref<string>('');
    const typeList = ref<any>();
    const files = ref<string>('');
    const fileName = ref<string>();
    const progress = ref<number>(0);
    const isCircle = ref<boolean>(false);
    const isLoad = ref<boolean>(true);
    const list = ref<any>([
        { 'id':1,'title':'格式问题' },
        { 'id':2,'title':'逻辑问题' },
        { 'id':3,'title':'有害信息' },
        { 'id':4,'title':'没有帮助' },
        { 'id':5,'title':'事实错误' },
        { 'id':6,'title':'答非所问' },

    ]);
    function openType(){
        isType.value = !isType.value;
    }
    function checkType(id:number){
        type.value = id;
        isType.value = false;
    }
	function getclick(e:event){
		e.stopPropagation();
	}
	function closefeed(){
		system.isShowFeedques = false;
	}
    function checkQues(e:event,id:number){
		e.stopPropagation();
        list.value.forEach(item=>{
            if(item.id == id){
                item.isCheck = !item.isCheck;
            }
        })
    }
    function getX(x:number){
        let width = window.innerWidth;
        let newX = x - 190;
        // if((width - x - 190) < 0){
        //     return (width-300);
        // }else{
            return x - 420;
        // } 
    }
    function getY(y:number){
        let height = window.innerHeight;
		//400
        let newy = y - 200;
        console.log(newy);
        if(newy< 0){
            newy = 0;
        }else if((newy+400) > height){
            newy = height - 400;
        }
        console.log(newy,y)
		return newy;
    }
    function save(){
        let typelist = [];
        list.value.forEach(item=>{
            if(item.isCheck){
                typelist.push(item.title);
            }
        })
		if(typelist.length == 0){
			ElMessage({
				message: '请选择反馈问题类型',
				type: 'error',
			})
			return;
		}
        if(!userfeedback.value){
            ElMessage({
				message: '请输入反馈意见',
				type: 'error',
			})
            return;
        }
        if(isLoad.value == false){
            ElMessage({
				message: '文件正在上传中，请稍后',
				type: 'error',
			})
            return;
        }
        let data = {
            userid : useStore.userIds,
            question : system.feedQueItem.ques.content,
            type : typelist.join(','),
            userfeedback : userfeedback.value,
            feedbackfile : files.value,
            id : system.feedQueItem.answer.id,
        }
        api.quesFeed(data).then(res=>{
            ElMessage({
				message: '问题已反馈,等待管理员处理',
				type: 'success',
			})
            system.isShowFeedques = false;
        })
    }
    function checkFile(file){
        var fileSize = file.size / 1024 / 1024 < 50;
        const index = file.name.lastIndexOf(".");
        const ext = file.name.substr(index + 1).toLowerCase();
        let extarr = ['txt','docx','word','rft','pdf','wps','xlsx','doc','ppt','pptx'];
        if (extarr.indexOf(ext) == -1) {
            ElMessage({
				message: '请上传正确的文件格式',
				type: 'error',
			})
            return false;
        }
        if (!fileSize) {
            ElMessage({
				message: '文件大小不能超过50MB',
				type: 'error',
			})
            return false;
        }
        console.log('开始上传文件')
        isLoad.value = false;
    }
    function handelProgress(e){
        progress.value = e.percent.toFixed(0);
    }
    function fileSuccess(response,file,filelist){
        console.log(response,file,filelist)
        let url = response.data.imgurl;
        fileName.value = url.substring(url.lastIndexOf('/') + 1);
        files.value = response.data.imgurl;
        progress.value = 0;
		ElMessage({
			message: '文件上传成功',
			type: 'success',
		})
        isLoad.value = true;
    }
    function removeFile(){
        files.value = '';
        fileName.value = '';
    }
	function handleClickOutside(){
		system.isShowFeedques = false;
	}
	onMounted(()=>{
		window.addEventListener('click', handleClickOutside);
	})
</script>
<style lang="scss" scoped>
.show{
    display:block;
}
.dialogBox{
	background:rgba(0,0,0,.5);
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1000;
	.bg{
		position: absolute;
		left: 0;
		top:0;
		width: 100%;
		height: 100%;
	}
}
.feedBox{
    width:350px;
    background:#fff;
    box-shadow:0 0 7px rgba(166,182,229,.6);
    position:absolute;
    padding:5px 20px;
    z-index:999;
	left: 50%;
	bottom:50%;
	transform: translate(-50%,50%);
    border-radius:10px;
    color:#9094b0;
    font-family:'siyuanR';
	
    .closer{
        width:40px;
        height:40px;
        background:url(../../assets/images/close03.png) no-repeat center center;
        background-size:9px 9px;
        position:absolute;
        right:-20px;
        top:-5px;
        cursor:pointer;
    }
	.feedCon{
		position: relative;
		z-index: 999;
	}
	&.pc{
		
	}
	&.wap{
		width: 100%;
		bottom:0;
		left: 0;
        transform:translate(0,0);
	}
    .top{
        color:#3a6abd;
        font-size:16px;
        line-height:24px;
        padding:10px 0 5px 0;
        font-family:'siyuanM';
    }
    .snagList{
        width:100%;
        padding-bottom:10px;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        font-size:13px;
        .snagItem{
            border:dashed 1px #cdd0de;
            background:#f1f5fb;
            width:88px;
            height:25px;
            text-align:center;
            line-height:23px;
            float:left;
            margin:3px;
            font-size:13px;
            font-family:'siyuanN';
            cursor:pointer;
            &.active,&:hover{
                background:#e5f2ff;
                border:solid 1px #95c0fc;
                color:#2379f7;
            }
        }
    }
    .textCon{
        width:100%;
        background:#f1f5fb;
        border-radius:5px;
        resize:none;
        height:58px;
        padding:5px;
        font-size:13px;
        line-height:24px;
        outline:none;
        margin-bottom:5px;
        font-family:'siyuanN';
        &::-webkit-input-placeholder {
            color:#9094b0;
            opacity:0.5;
        }
    }
    .tit-1{
        font-size:12px;
        line-height:18px;
        margin-bottom:5px;
        font-family:'siyuanR';
    }

    .upload{
        background:#f1f5fb;
        font-size:14px;
        width:100%;
        height:45px;
        border-radius:5px;
        margin-bottom:8px;
        line-height:45px;
        display:flex;
        justify-content:space-between;
        position:relative;
        .file{
            background:url(../../assets/images/icon_img.png) no-repeat 12px center #f1f5fb;
            background-size:13px 13px;
            height:100%;
            flex:1;
            padding-left:30px;
            max-width:calc(100% - 40px);
            overflow:hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .close{
            width:36px;
            height:100%;
            background:url(../../assets/images/close02.png) no-repeat center center;
            background-size:8px 8px;
            float:right;
            cursor:pointer;
        }
        .prew{
            width:36px;
            height:100%;
            background:url(../../assets/images/icon_prew.png) no-repeat center center;
            background-size:15px auto;
            float:right;
            cursor:pointer;
        }
        .btn{
            flex:1;
            background:url(../../assets/images/icon4.png) no-repeat 12px center;
            background-size:13px 13px;
            cursor:pointer;
            padding-left:30px;
            &:hover{
                background:url(../../assets/images/icon04.png) no-repeat 12px center;
                background-size:13px 13px;
                color:#2379f7;
            }
        }
        .circle{
            width:35px;
            height:35px;
            position:absolute;  
            right:5px;
            top:5px;  
            .percentage{
                color:#2379f7;
                font-size:10px;
                left:50%;
                transform:translate(-50%);
            }
        }
        .upload-demo{
            width:100%;
        }
        .typeList{
            position:absolute;
            left:0;
            top:50px;
            width:100%;
            background:#fff;
            border-radius:5px;
            background:#fff;
            box-shadow:0 0 7px rgba(166,182,229,.6);     
            display:flex;
            padding:10px;
            li{
                border:solid 1px #3282f7;
                line-height:30px;
                text-align:center;
                flex:1px;
                border-radius:5px;  
                margin:0 10px;
                cursor:pointer;
                &.active{
                    background:#3282f7;
                    color:#fff;
                }
            }
        }
        .btnUp{
            width:40px;
            height:100%;
            background:url(../../assets/images/icon5.png) no-repeat center center;
            background-size:11px 7px;
            cursor:pointer;
            transition:all .5s;
            &.active{
                transform:rotate(180deg);
            }
        }
    }
	.btnpage{
	    width:100%;
	    display: flex;
		justify-content: center;
		.btnSubmit{
			margin:10px 15px;
		}
	}
	.btnCancel{
	    border:solid 1px #c6c9df;
	    width:96px;
	    height:32px;
	    border-radius:5px;
	    font-size:14px;
	    margin:10px 15px;
	    cursor:pointer;
	    float:right;
	    color:#9094b0;
	    &:hover{
	        border:solid 1px #2379ff;
	        color:#2379ff;
	    }
	}
    .btnSubmit{
		background-image: linear-gradient(90deg, #66e6b1, #2379ff);
        width:96px;
        height:32px;
        border-radius:5px;
        color:#fff;
        font-size:14px;
        margin:10px auto;
        cursor:pointer;
        position:relative;
        &::after{
            background:#2379ff;
            position:absolute;
            left:0;
            top:0;
            content:'';
            width:100%;
            height:100%;
            opacity:0;
            transition:all .8s;
            border-radius:5px;
        }
        &:hover{
            &::after{
                opacity:1;
            }
        }
        i{
            position:relative;
            z-index:10;
            font-style:normal;
        }
    }
}
::v-deep .el-upload{
    width:100%;
    justify-content:start;
    font-family:'siyuanR';
}
::v-deep .el-progress path:first-child{
    stroke: #bdbfcc;
}
::v-deep .el-progress text {
    color: #e6451c;
}
::v-deep .el-progress__text{
    min-width:36px;
}
@media screen and (max-width: 768px) {
	
}
</style>